<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: none;
        }
    </style>
</head>
<body>

    <button style="color: red;">1</button>
    <button>2</button>
    <button>3</button>

    <div style="display: block;">11111</div>
    <div>222222</div>
    <div>333333</div>

    <script>

        var oBtns = document.querySelectorAll('button') ;
        var oDivs = document.querySelectorAll('div') ;

        // for(var i = 0 ; i < oBtns.length ; i++) {
        //     // 给每一个按钮绑定自定义属性 , 为了知道点击的按钮是第几个
        //     oBtns[i].suiBian = i ;
        //     oBtns[i].onclick = function() {
        //         // 把所有的都变黑，当前这个变红
        //         for(var j = 0 ; j < oBtns.length ; j++) {
        //             oBtns[j].style.color = 'black';
        //         }
        //         // 当前这个显示  this -> 当前点击的这个按钮
        //         this.style.color = 'red';

        //         // 把所有的div隐藏，当前点击的按钮对应的这个显示
        //         for(var i = 0 ; i < oDivs.length ; i++) {
        //             oDivs[i].style.display = 'none' ;
        //         }
        //         // 当前点击的按钮对应的这个显示   必须知道当前点击的这个按钮是第几个
        //         var index = this.suiBian ;
        //         console.log(index);
        //         oDivs[index].style.display = 'block';
        //     }
        // }



        for(var i = 0 ; i < oBtns.length ; i++) {
            // 给每一个按钮绑定自定义属性 , 为了知道点击的按钮是第几个
            oBtns[i].suiBian = i ;
            oBtns[i].onclick = function() {
                
                for(var j = 0 ; j < oBtns.length ; j++) {
                    // 把所有的按钮都变黑
                    oBtns[j].style.color = 'black' ;
                    // 把所有的div隐藏
                    oDivs[i].style.display = 'none' ;
                }

                // 当前按钮变红
                this.style.color = 'red' ;
                // 当前按钮对应的div显示
                oDivs[this.suiBian].style.display = 'block' ;
               
            }
        }

    </script>
    
</body>
</html>